<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="condition-container mbt40">
          <div class="condition">
          <el-select
                v-model="dateType"
                class="w80"
                :placeholder="translate('请选择')"
                @change="selectFn"
              >
                <el-option
                  v-for="item in Optiondate"
                  :key="item.value"
                  :label="item.lable"
                  :value="item.value"
                />
              </el-select>
              <el-date-picker
                v-if="dateType === 'MO'"
                v-model="searchInfo2"
                :end-placeholder="translate('结束日期')"
                range-separator="to"
                :start-placeholder="translate('开始日期')"
                type="monthrange"
                value-format="YYYY-MM-DD"
              />
              <el-date-picker
                class="w80"
                v-if="dateType === 'YE'"
                v-model="searchInfo"
                type="year"
                placeholder="起始年份"
                format="YYYY"
                value-format="YYYY"
              />
              <el-date-picker
                class="w80"
                v-if="dateType === 'YE'"
                v-model="searchInfo1"
                type="year"
                placeholder="结束年份"
                format="YYYY"
                value-format="YYYY"
              />
        </div>
        <div class="condition">
              <span class="w120 color_494949 ft12 pr5">{{ translate('标识') }}：</span>
              <el-select
                v-model="Sign"
                class="w164"
                :placeholder="translate('请选择')"
              >
                <el-option
                  v-for="item in OptionReceive"
                  :key="item.value"
                  :label="item.lable"
                  :value="item.value"
                />
              </el-select>
          </div>
          <div class="condition">
            <span class="w120 color_494949 ft12 pr5">{{ translate('物资编码') }}：</span>
            <el-input
              v-model="itemcode"
              class="w164 mr10"
              placeholder="请输入物资编码"
            />
          </div>
          <div class="condition">
          <span class="w120 color_494949 ft12 pr5">{{ translate('仓库单位') }}：</span>
          <el-autocomplete
            v-model="whUnit"
            class="inline-input mr10 w164"
            :fetch-suggestions="querySearch"
            placeholder="选择单位"
            @select="handleSelect"
          />
          <el-button class="settingBtn ml10" type="primary" @click="seachFn">
            {{ translate('查询') }}
            </el-button>
         </div>
        </div>
      </el-col>
      <el-col :span="12">
        <ListSeen ref="childRef" :searchtime="searchInfo2" :listseenarr="ListSeenArr" :searchinfo="searchInfo" :searchinfo1="searchInfo1" :datetype="dateType" :sign="Sign" />
      </el-col>
      <el-col :span="12">
        <Chartdata ref="childRef1" :searchtime="searchInfo2"  :searchinfo="searchInfo" :searchinfo1="searchInfo1" :datetype="dateType" :sign="Sign" />
      </el-col>
      <!-- <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <TableList :listdonearr="ListDoneArr" :msgdonecount="MsgDoneCount" />
      </el-col>
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <ListSeen :listseenarr="ListSeenArr" :msgreadcount="MsgReadCount" />
      </el-col> -->
      <!-- <el-col :lg="6" :md="12" :sm="24" :xl="12" :xs="24">
        <access />
      </el-col> -->
      <!-- <el-col :lg="6" :md="12" :sm="24" :xl="12" :xs="24">
        <authorization />
      </el-col> -->
      <!-- <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
        <version-information />
      </el-col> -->
      <!-- <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <china-map />
      </el-col> -->
      <!-- <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <my-project />
      </el-col> -->
      <!-- <icon-list /> -->
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <ListFlow :listlowarr="ListFlowArr" :msgflowcount="MsgFlowCount" />
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
  // import PageHeader from './components/PageHeader'
  import Chartdata from './components/chartdata'
  // import Chartdataout from './components/chartdataout'
  // import Access from './components/Access'
  // import Authorization from './components/Authorization'
  // import ChinaMap from './components/ChinaMap'
  // import IconList from './components/IconList'
  // import TableList from './components/tableList'
  // import ListFlow from './components/listflow'
  import ListSeen from './components/listseen'
  import { TaskListData } from '@/api/form'
  import { BaseGetPageData } from '@/api/item'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Index',
    components: {
      // PageHeader,
      // TableList,
      // ListFlow,
      ListSeen,
      Chartdata,
      // Chartdataout,
      /*  Plan, */
      // Access,
      // Authorization,
      // ChinaMap,
      // IconList,
    },
    data() {
      return {
        ListDoneArr: [],
        ListFlowArr: [],
        ListSeenArr: [],
        MsgDoneCount: 0,
        MsgFlowCount: 0,
        MsgReadCount: 0,
        searchInfo: '',
        searchInfo1: '',
        searchInfo2: [],
        isShow: true,
        dateType: 'YE',
        Sign: '出库(-)',
        itemcode: '',
        whUnit: '',
        whdata: [],
        Optiondate: [
          {
            lable: '按年',
            value: 'YE'
          },
          {
            lable: '按月',
            value: 'MO'
          }
        ],
        OptionReceive:[
          {
            lable: '出库(-)',
            value: '出库(-)',
          },
          {
            lable: '入库(+)',
            value: '入库(+)',
          },
        ]
      }
    },
    created() {
      this.init()
      this.WHGetPageData()
      if(this.dateType === 'MO') {
        this.searchInfo2 = this.searchInfo2&&this.searchInfo2.length > 0 ? this.searchInfo2 : this.getTime()
      }

    },
    methods: {
      translate(row) {
        return translate(row)
      },
      selectFn(val){
        this.dateType = val
        console.log(val)
      },
      seachFn() {
        this.$refs.childRef.childMethod({
          itemcode:this.itemcode,
          dateType: this.dateType,
          whUnit: this.whUnit
        })
        this.$refs.childRef1.childMethod({
          itemcode:this.itemcode,
          dateType: this.dateType,
          whUnit: this.whUnit
        })
      },
      closeFn() {
        this.isShow = false
      },
      more_fn() {
        this.$router.push({
          path: '/base/itemstockSt',
        })
      },
      handleSelect(item) {
        console.log(item)
      },
      querySearch(queryString, cb) {
        const restaurants = this.whdata
        const results =
          queryString && queryString != 'null'
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants
        console.log(results)
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          console.log(restaurant)
          return (
            restaurant.value
              .toLowerCase()
              .indexOf(queryString.toLowerCase()) === 0
          )
        }
      },
      async WHGetPageData() {
        const params = {
          pageNo: 1,
          pageSize: 10,
          wheres: `[{"name":"ModuleId","value":"","displayType":"equal"}]`,
          export: true,
          moduleType: 'ModuleId',
          sort: 'SortCode',
          order: 'ASC',
          search: '',
        }
        const data = await BaseGetPageData(params)
        if (data.data.rows && data.data.rows.length > 0) {
          data.data.rows.map((item) => {
            item.value = item.FullName
          })
        }
        this.whdata = data.data.rows
      },
      async init() {
        const data = await TaskListData()
        if (data.Result.Code === '200') {
          this.ListDoneArr = data.Result.Data.data.ListDone
          this.ListFlowArr = data.Result.Data.data.ListFlow
          this.ListSeenArr = data.Result.Data.data.ListSeen
          this.MsgDoneCount = data.Result.Data.data.MsgDoneCount
          this.MsgFlowCount = data.Result.Data.data.MsgFlowCount
          this.MsgReadCount = data.Result.Data.data.MsgReadCount
        }
        console.log(data)
      },
      getTime() {
        // 获取Date()对象
        const date = new Date()
        // 获取当前事件的年份转为字符串
        const year = date.getFullYear().toString()
        // 获取月份，注意：月份默认从0开始，所以要+1
        const month =
          date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1).toString()
            : (date.getMonth() + 1).toString()
        // 获取天，
        const day =
          date.getDate() < 10
            ? '0' + date.getDate().toString()
            : date.getDate().toString()
        // 获取时
        const hour = date.getHours().toString()
        // 获取分
        const minute = date.getMinutes().toString()
        // 获取秒
        const second = date.getSeconds().toString()
        // 拼接时间

      // 例如：1号：00:00:00，当日：当前时间
        // 举例：2022-09-01 00:00:00   2022-09-29 13:39:29
        const begin = year + '-' + month + '-01' // 当月第一天
        const end = year + '-' + month + '-' + day // 当天
        console.log(begin)
        console.log(end)
        return [begin,end]
      },
    },
  })
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    background: $base-color-background !important;
    .condition {
      margin-bottom: 20px;
    }
    :deep() {
      .page-header {
        margin-bottom: 20px;
      }

      .access,
      .authorization,
      .version-information {
        min-height: 268px;
        margin-bottom: 20px;
      }

      .el-card {
        .el-card__header {
          position: relative;

          .card-header-tag {
            position: absolute;
            top: 15px;
            right: $base-margin;
          }

          > div > span {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }

        .el-card__body {
          position: relative;

          .echarts {
            width: 100%;
            height: 127px;
          }

          .card-footer-tag {
            position: absolute;
            right: $base-margin;
            bottom: 15px;
          }
        }
      }

      .bottom {
        padding-top: 20px;
        margin-top: 5px;
        color: #595959;
        text-align: left;
        border-top: 1px solid $base-border-color;
      }
    }
  }
  @keyframes slideUp {
  from {
    transform: translateY(100%); /* 从下边开始 */
    opacity: 0; /* 不可见 */
  }
  to {
    transform: translateY(0); /* 移动到原位置 */
    opacity: 1; /* 完全可见 */
  }
}

.close-fill {
  position: absolute;
  top: 0;
  right:0;
  z-index: 999;
}
.more_fn {
  position: absolute;
  bottom: 0;
  right:0;
  z-index: 999;
}
.disBlock {
  display: block !important;
}
.disNone {
  display: none !important;
}
.color_red {
  color: red;
}
.w80 {
  width: 80PX !important;
}
.condition-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .condition {
        margin-right: 14px;
        margin-bottom: 10px;
      }
  }
 .mbt40 {
  margin-bottom: 40px;
 }
 .w164 {
  width:164px !important;
 }
 .ml10 {
  margin-left: 10rpx;
 }
</style>
